<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>投资收益 - 共享米宝</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100 text-gray-800">
    <div class="app-container max-w-md mx-auto bg-white min-h-screen relative pb-16">
        <!-- Header -->
        <header class="bg-white sticky top-0 z-10 shadow-sm">
            <div class="flex justify-between items-center p-4">
                <a href="earnings.html" class="text-gray-600">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-lg font-medium">投资收益</h1>
                <div class="w-5"></div> <!-- Placeholder for balance -->
            </div>
        </header>

        <!-- Main Content -->
        <main>
            <!-- Earnings Summary -->
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6">
                <div class="text-center mb-4">
                    <div class="text-sm opacity-80">本月投资收益</div>
                    <div class="text-3xl font-bold mt-1">¥685.42</div>
                </div>
                
                <div class="text-center mb-2">
                    <div class="text-sm opacity-80">累计总收益</div>
                    <div class="text-xl font-bold mt-1">¥4,256.88</div>
                </div>

                <div class="grid grid-cols-2 gap-4 mt-6">
                    <div class="text-center">
                        <div class="text-sm opacity-80">绑定设备</div>
                        <div class="text-xl font-medium mt-1">5台</div>
                    </div>
                    <div class="text-center">
                        <div class="text-sm opacity-80">分润比例</div>
                        <div class="text-xl font-medium mt-1">20%</div>
                    </div>
                </div>
            </div>

            <!-- Earnings Filter -->
            <div class="p-4 bg-white border-b">
                <div class="flex justify-between items-center">
                    <span class="text-sm">筛选</span>
                    <div class="flex space-x-2">
                        <button class="text-sm border border-gray-300 px-3 py-1 rounded-full bg-blue-500 text-white">
                            本月
                        </button>
                        <button class="text-sm border border-gray-300 px-3 py-1 rounded-full">
                            上月
                        </button>
                        <button class="text-sm border border-gray-300 px-3 py-1 rounded-full">
                            全部
                        </button>
                    </div>
                </div>
            </div>

            <!-- Tabs Navigation -->
            <div class="bg-white border-b">
                <div class="flex">
                    <button id="tab-devices" class="flex-1 py-3 px-4 text-center border-b-2 border-blue-500 text-blue-500 font-medium">
                        我的设备
                    </button>
                    <button id="tab-details" class="flex-1 py-3 px-4 text-center text-gray-500">
                        收益明细
                    </button>
                </div>
            </div>

            <!-- Device List -->
            <div id="device-list" class="bg-white">
                <div class="p-4 border-b">
                    <h2 class="font-medium">我的设备</h2>
                </div>
                
                <!-- Device 1 -->
                <div class="p-4 border-b device-item" data-device="MB12345">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="bg-blue-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-battery-full text-blue-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">设备编号: MB12345</div>
                                <div class="text-sm text-gray-500">位置: 星巴克-人民广场店</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-green-600 font-medium">¥182.40</div>
                            <div class="text-sm text-gray-500">本月收益</div>
                        </div>
                    </div>
                </div>
                
                <!-- Device 2 -->
                <div class="p-4 border-b device-item" data-device="MB12346">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="bg-blue-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-battery-full text-blue-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">设备编号: MB12346</div>
                                <div class="text-sm text-gray-500">位置: 全家便利店-南京路店</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-green-600 font-medium">¥153.12</div>
                            <div class="text-sm text-gray-500">本月收益</div>
                        </div>
                    </div>
                </div>
                
                <!-- Device 3 -->
                <div class="p-4 border-b device-item" data-device="MB12347">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="bg-blue-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-battery-full text-blue-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">设备编号: MB12347</div>
                                <div class="text-sm text-gray-500">位置: 7-11便利店-陆家嘴店</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-green-600 font-medium">¥128.90</div>
                            <div class="text-sm text-gray-500">本月收益</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Earnings Details -->
            <div id="earnings-details" class="bg-white hidden">
                <div class="p-4 border-b">
                    <h2 class="font-medium">收益明细</h2>
                    <div id="device-filter" class="text-sm text-gray-500 mt-1 hidden">
                        设备筛选: <span id="device-id" class="font-medium"></span>
                        <button id="clear-filter" class="text-blue-500 ml-2">清除</button>
                    </div>
                </div>
                
                <!-- Transaction 1 -->
                <div class="p-4 border-b earnings-record" data-device="MB12345">
                    <div class="flex justify-between items-start">
                        <div>
                            <div class="flex items-center">
                                <div class="bg-green-100 p-1.5 rounded-md mr-3">
                                    <i class="fas fa-plus text-green-500 text-xs"></i>
                                </div>
                                <div>
                                    <div class="font-medium">投资分润</div>
                                    <div class="text-xs text-gray-500 mt-1">设备ID: MB12345</div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-green-600 font-medium">+¥12.50</div>
                            <div class="text-xs text-gray-500 mt-1">2023-05-18 14:23</div>
                        </div>
                    </div>
                </div>
                
                <!-- Transaction 2 -->
                <div class="p-4 border-b earnings-record" data-device="MB12346">
                    <div class="flex justify-between items-start">
                        <div>
                            <div class="flex items-center">
                                <div class="bg-green-100 p-1.5 rounded-md mr-3">
                                    <i class="fas fa-plus text-green-500 text-xs"></i>
                                </div>
                                <div>
                                    <div class="font-medium">投资分润</div>
                                    <div class="text-xs text-gray-500 mt-1">设备ID: MB12346</div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-green-600 font-medium">+¥8.80</div>
                            <div class="text-xs text-gray-500 mt-1">2023-05-18 12:42</div>
                        </div>
                    </div>
                </div>
                
                <!-- Transaction 3 -->
                <div class="p-4 border-b earnings-record" data-device="MB12347">
                    <div class="flex justify-between items-start">
                        <div>
                            <div class="flex items-center">
                                <div class="bg-green-100 p-1.5 rounded-md mr-3">
                                    <i class="fas fa-plus text-green-500 text-xs"></i>
                                </div>
                                <div>
                                    <div class="font-medium">投资分润</div>
                                    <div class="text-xs text-gray-500 mt-1">设备ID: MB12347</div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-green-600 font-medium">+¥9.20</div>
                            <div class="text-xs text-gray-500 mt-1">2023-05-18 11:05</div>
                        </div>
                    </div>
                </div>
                
                <!-- Load More -->
                <div class="p-4 text-center">
                    <button class="text-blue-500 text-sm font-medium">
                        加载更多
                    </button>
                </div>
            </div>
        </main>

        <!-- Bottom Navigation -->
        <!-- <nav class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around items-center p-2 max-w-md mx-auto">
            <a href="index.html" class="text-center py-1 px-3">
                <i class="fas fa-home text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">首页</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-bolt text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">租借</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-map-marker-alt text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">附近</div>
            </a>
            <a href="earnings.html" class="text-center py-1 px-3">
                <i class="fas fa-chart-line text-blue-500 text-xl"></i>
                <div class="text-xs mt-1 text-blue-500">收益</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-user text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">我的</div>
            </a>
        </nav> -->
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Tab switching
            const tabDevices = document.getElementById('tab-devices');
            const tabDetails = document.getElementById('tab-details');
            const deviceList = document.getElementById('device-list');
            const earningsDetails = document.getElementById('earnings-details');
            
            // Device filter elements
            const deviceFilter = document.getElementById('device-filter');
            const deviceIdSpan = document.getElementById('device-id');
            const clearFilterBtn = document.getElementById('clear-filter');
            
            // Set active tab
            function setActiveTab(tab) {
                // Reset all tabs
                tabDevices.classList.remove('border-blue-500', 'text-blue-500');
                tabDevices.classList.add('text-gray-500');
                tabDetails.classList.remove('border-blue-500', 'text-blue-500');
                tabDetails.classList.add('text-gray-500');
                
                // Set active tab
                tab.classList.remove('text-gray-500');
                tab.classList.add('border-b-2', 'border-blue-500', 'text-blue-500');
            }
            
            // Tab click events
            tabDevices.addEventListener('click', function() {
                setActiveTab(this);
                deviceList.classList.remove('hidden');
                earningsDetails.classList.add('hidden');
            });
            
            tabDetails.addEventListener('click', function() {
                setActiveTab(this);
                deviceList.classList.add('hidden');
                earningsDetails.classList.remove('hidden');
            });
            
            // Device items click events
            const deviceItems = document.querySelectorAll('.device-item');
            deviceItems.forEach(item => {
                item.addEventListener('click', function() {
                    const deviceId = this.getAttribute('data-device');
                    filterEarningsByDevice(deviceId);
                    
                    // Switch to earnings tab
                    setActiveTab(tabDetails);
                    deviceList.classList.add('hidden');
                    earningsDetails.classList.remove('hidden');
                });
            });
            
            // Filter earnings by device
            function filterEarningsByDevice(deviceId) {
                const earningsRecords = document.querySelectorAll('.earnings-record');
                
                // Show filter UI
                deviceFilter.classList.remove('hidden');
                deviceIdSpan.textContent = deviceId;
                
                // Filter records
                earningsRecords.forEach(record => {
                    if (record.getAttribute('data-device') === deviceId) {
                        record.classList.remove('hidden');
                    } else {
                        record.classList.add('hidden');
                    }
                });
            }
            
            // Clear device filter
            clearFilterBtn.addEventListener('click', function() {
                deviceFilter.classList.add('hidden');
                
                // Show all records
                const earningsRecords = document.querySelectorAll('.earnings-record');
                earningsRecords.forEach(record => {
                    record.classList.remove('hidden');
                });
            });
        });
    </script>
</body>
</html> 